<template>
  <div>
    <el-card class="maincard">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-card class="itemcard">
            <div class="block">
              <h2 class="demonstration">美食街</h2>

              <el-image :src="src" @click="videoDialogVisible" />
            </div>
            <div class="videofooten">
              <el-tag>当前时刻街区人流: {{ street.people }}</el-tag>
              <el-tag v-if="street.smoke === 0">当前区域无浓烟</el-tag>
              <el-tag v-if="street.fire === 0">当前区域无烟火</el-tag>
            </div>
            <div class="smoke">
              <el-alert v-if="street.smoke === 1" title="有浓烟区域" type="warning" show-icon />
            </div>
            <div class="fire">
              <el-alert v-if="street.fire === 1" title="有火区域" type="error" show-icon />
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card class="itemcard">
            <div class="block">
              <h2 class="demonstration">华阳路</h2>

              <el-image
                src="http://121.196.149.242:8080/img/video20.png"
                @click="videoDialogVisible"
              />
            </div>
            <div class="videofooten">
              <el-tag>当前时刻街区人流: {{ street.people }}</el-tag>
              <el-tag v-if="street.smoke === 0">当前区域无浓烟</el-tag>
              <el-tag v-if="street.fire === 0">当前区域无烟火</el-tag>
            </div>
            <div class="smoke">
              <el-alert v-if="street.smoke === 1" title="有浓烟区域" type="warning" show-icon />
            </div>
            <div class="fire">
              <el-alert v-if="street.fire === 1" title="有火区域" type="error" show-icon />
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="itemcard">
            <div class="block">
              <h2 class="demonstration">大观楼</h2>

              <el-image
                src="http://121.196.149.242:8080/img/video30.png"
                @click="videoDialogVisible"
              />
            </div>
            <div class="videofooten">
              <el-tag>当前时刻街区人流: {{ street.people }}</el-tag>
              <el-tag v-if="street.smoke === 0">当前区域无浓烟</el-tag>
              <el-tag v-if="street.fire === 0">当前区域无烟火</el-tag>
            </div>
            <div class="smoke">
              <el-alert v-if="street.smoke === 1" title="有浓烟区域" type="warning" show-icon />
            </div>
            <div class="fire">
              <el-alert v-if="street.fire === 1" title="有火区域" type="error" show-icon />
            </div>
          </el-card>
        </el-col>
        <el-col :span="8" style="margin-top: 15px">
          <el-card class="itemcard">
            <div class="block">
              <h2 class="demonstration">水街</h2>

              <el-image
                src="http://121.196.149.242:8080/img/video40.png"
                @click="videoDialogVisible"
              />
            </div>
            <div class="videofooten">
              <el-tag>当前时刻街区人流: {{ street.people }}</el-tag>
              <el-tag v-if="street.smoke === 0">当前区域无浓烟</el-tag>
              <el-tag v-if="street.fire === 0">当前区域无烟火</el-tag>
            </div>
            <div class="smoke">
              <el-alert v-if="street.smoke === 1" title="有浓烟区域" type="warning" show-icon />
            </div>
            <div class="fire">
              <el-alert v-if="street.fire === 1" title="有火区域" type="error" show-icon />
            </div>
          </el-card>
        </el-col>

        <el-col :span="8" style="margin-top: 15px">
          <el-card class="itemcard">
            <div class="block">
              <h2 class="demonstration">春熙路</h2>

              <el-image
                src="http://121.196.149.242:8080/img/video50.png"
                @click="videoDialogVisible"
              />
            </div>
            <div class="videofooten">
              <el-tag>当前时刻街区人流: {{ street.people }}</el-tag>
              <el-tag v-if="street.smoke === 0">当前区域无浓烟</el-tag>
              <el-tag v-if="street.fire === 0">当前区域无烟火</el-tag>
            </div>
            <div class="smoke">
              <el-alert v-if="street.smoke === 1" title="有浓烟区域" type="warning" show-icon />
            </div>
            <div class="fire">
              <el-alert v-if="street.fire === 1" title="有火区域" type="error" show-icon />
            </div>
          </el-card>
        </el-col>
        <el-col :span="8" style="margin-top: 15px">
          <el-card class="itemcard">
            <div class="block">
              <h2 class="demonstration">莺飞路</h2>

              <el-image
                src="http://121.196.149.242:8080/img/video60.png"
                @click="videoDialogVisible"
              />
            </div>
            <div class="videofooten">
              <el-tag>当前时刻街区人流: {{ street.people }}</el-tag>
              <el-tag v-if="street.smoke === 0">当前区域无浓烟</el-tag>
              <el-tag v-if="street.fire === 0">当前区域无烟火</el-tag>
            </div>
            <div class="smoke">
              <el-alert v-if="street.smoke === 1" title="有浓烟区域" type="warning" show-icon />
            </div>
            <div class="fire">
              <el-alert v-if="street.fire === 1" title="有火区域" type="error" show-icon />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog
      title="街区视频"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div class="imgBody">
        <el-image :src="src1" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList } from '@/api/vedio'
export default {
  data() {
    return {
      src: '',
      dialogVisible: false,
      src1: 'http://121.196.149.242:8080/img/video1.png',
      showImg: true,
      timer: null,
      image: null,
      street: { prople: 0 },
      timer2: null
    }
  },
  watch: {},
  created() {
    this.getInit()
  },
  destroyed() {
    clearTimeout(this.timer2)
  },
  methods: {
    getInit() {
      const time1 = new Date()
      const time_second1 = time1.getSeconds()
      this.src =
        'http://121.196.149.242:8080/img/video' + time_second1 + '.png'

      this.timer2 = setInterval(() => {
        fetchList(1).then((res) => {
          this.street = res.data
        })
      }, 1000)
    },
    // 窗口可视化
    videoDialogVisible() {
      const time = new Date()
      const time_second = time.getSeconds()

      this.src1 =
        'http://121.196.149.242:8080/img/video' + time_second + '.png'
      this.dialogVisible = true

      this.getVideo()
    },

    getVideo() {
      this.timer = null
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        const time = new Date()
        this.showImg = false
        const time_second = time.getSeconds()
        this.image = new Image()
        this.image.src =
          'http://121.196.149.242:8080/img/video' + time_second + '.png'
        this.image.onload = () => {
          this.src1 =
            'http://121.196.149.242:8080/img/video' + time_second + '.png'
        }

        this.showImg = true
      }, 1000)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          clearInterval(this.timer)
          done()
        })
        .catch((_) => {})
    },
    closeDialog() {
      this.dialogVisible = false
      clearInterval(this.timer)
    }
  }
}
</script>

<style  scoped>
.demonstration {
  text-align: center;
  font-family: "楷体";
  font-weight: bolder;
  font-size: 30px;
}
.el-image {
  width: 100%;
  height: 100%;
}
.imgBody {
  width: 100%;
  height: 700px;
}
.el-dialog {
  height: 800px !important;
}
.maincard {
  background-color: #f5f5f5;
}
.itemcard {
  border-radius: 10px;
  box-shadow: 0.1em 0.1em 0.3em rgb(65, 65, 65, 0.5);
}
.videofooten{
  margin-top: 10px;
}
.el-alert{
  margin-top: 15px;
}
.el-tag{
  margin-left: 15px;
}
</style>
